import React, { Component } from 'react';
import axios from 'axios';

const GlobalContext = React.createContext();

class Film extends Component {
  render() {
      let {name,detail} = this.props
        return (
          //消费者模式
          <GlobalContext.Consumer>     
            {
              (value)=>{
                return(
                  <div>
                    <span style={{cursor:'pointer'}} onClick={()=>{
                    value.changeDetail(detail)
                    }}>{name}</span>
                  </div>
                )
              }
            }
          </GlobalContext.Consumer>
    )
  }
}

export default class App extends Component {
    constructor(){
    super();
      this.state = {
        list:[],
        detail:''
      }
      axios({
          url:'https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=3889594',
          headers:{
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"165294070798642513887233"}',
            'X-Host': 'mall.film-ticket.film.list'
          }
      }).then(res =>{
          this.setState({
              list:res.data.data.films
          })
          console.log(res.data.data.films)
      })

  }
  render() {
    return (
      <GlobalContext.Provider value={   //生产者模式
        {
          detail:this.state.detail,
          changeDetail:(zhi)=>{
            this.setState({
              detail: zhi
            })
          }
        }
      }>
        <div>
          {
            this.state.list.map((item)=>
              <Film key={item.filmId} name={item.name} detail={item.synopsis}></Film>
            )
          }
          <Film2 detail={this.state.detail}></Film2>
       </div>
      </GlobalContext.Provider>
    )
  }
}



class Film2 extends Component {
  render() {
    return (
      <GlobalContext.Consumer>
        {
          (value)=>{
            return (
              <div style={{
                background:'yellow',
                position:'fixed',
                right:0,
                width:'300px',
                height:'300px'
                }}>{value.detail}
            </div>
            )
          }
        }
      </GlobalContext.Consumer>
    )
  }
}

